<template lang="pug">
  .hro-admin-home
    Row(:gutter="20")
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 16}" :xxl="{span: 18}")
        //- Card(shadow title="数据总览" style="height: 580px;")
        .hro-card.mb-12
          Spin(size="large" fix v-if="dataScreenSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-shuju.png")
              span 数据总览
            .title-right
              router-link(v-if="hasDataScreening" :to="{ name: 'data-screening'}") 数据看板
          Row.card-container
            Col.data-item(:xl="{span: 24}" :xxl="{span: 12}")
              .item-title
                .text
                  | 客户数量：
                  span.blue(@click="gotoStatus('customerInformation', '', '1')") {{dataScreen?dataScreen.customerTotal:0}}
                  | （家）
                  span.tag.ml-5.font-12 正常合作
              .item-content.warp
                template(v-if="hasCustomer")
                  .li(@click="gotoStatus('customerInformation', '1', '1')")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/kehu-1.png")
                      span 人事代理
                    .li-number
                      count-to(:end="dataScreen?dataScreen.agentTotal:0" count-class="count-style")
                  .li(@click="gotoStatus('customerInformation', '2', '1')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/kehu-2.png")
                      span 劳务派遣
                    .li-number
                      count-to(:end="dataScreen?dataScreen.laborDispatchTotal:0" count-class="count-style")
                  .li(@click="gotoStatus('customerInformation', '3', '1')")
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/kehu-3.png")
                      span 劳务外包
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outsourcingTotal:0" count-class="count-style")
                template(v-if="!hasCustomer")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/kehu-1.png")
                      span 人事代理
                    .li-number
                      count-to(:end="dataScreen?dataScreen.agentTotal:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/kehu-2.png")
                      span 劳务派遣
                    .li-number
                      count-to(:end="dataScreen?dataScreen.laborDispatchTotal:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/kehu-3.png")
                      span 劳务外包
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outsourcingTotal:0" count-class="count-style")
            Col.data-item(:xl="{span: 24}" :xxl="{span: 12}")
              .item-title
                .text
                  | 员工数量：
                  span.blue(@click="gotoRouter('roster')") {{dataScreen?dataScreen.empTotal:'0'}}
                  | （人）
              .item-content.warp
                template(v-if="hasRoster")
                  .li(@click="gotoRouter('roster', 1)")
                    .li-img.style-4
                      img.mb-10(src="@/assets/images/home/yuangong-1.png")
                      span 在职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.inEmployee:0" count-class="count-style")
                  .li(@click="gotoRouter('roster', 0)")
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yuangong-2.png")
                      span 离职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outEmployee:0" count-class="count-style")
                  .li(@click="gotoRouter('roster', -1)")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/yuangong-3.png")
                      span 离职未报停
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outNoStopEmployee:0" count-class="count-style")
                template(v-if="!hasRoster")
                  .li.no-hover
                    .li-img.style-4
                      img.mb-10(src="@/assets/images/home/yuangong-1.png")
                      span 在职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.inEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yuangong-2.png")
                      span 离职
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/yuangong-3.png")
                      span 离职未报停
                    .li-number
                      count-to(:end="dataScreen?dataScreen.outNoStopEmployee:0" count-class="count-style")
            Divider
            Col.data-item(:xl="{span: 24}" :xxl="{span: 12}")
              .item-title.display-flex
                .text
                  | 异动数量（条）
                  span.tag.ml-5.font-12 当月
                div(v-if="dataScreen && dataScreen.changeFailList.length > 0")
                  Poptip.ml-30(trigger="click" title="异动异常")
                    .poptip-content(slot="content" sytle="height: auto")
                      template(v-for="(item,index) in dataScreen.changeFailList")
                        //- .item.hasPermission(v-if="item.hasPermission" @click="gotoPage(item.code,{status:2, hasStatus: true})") {{item.content}}
                        .item.hasPermission(@click="gotoChangeFail(item.securityType,{status:item.type, hasStatus: true, hasTime:true})") {{item.content}}
                        //- .item(v-else) {{item.content}}
                    Badge.cursor-pointer(:count="badgeNum")
                      .text
                        span.tag.font-12.pr-10 异常 
              .item-content.warp
                template(v-if="hasSS")
                  .li(@click="gotoPage(dataScreen.socialSecurity.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yd-shebao.png")
                      span 社保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.socialSecurity.count:0" count-class="count-style")
                template(v-if="!hasSS")
                  .li.no-hover
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home/yd-shebao.png")
                      span 社保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.socialSecurity.count:0" count-class="count-style")
                template(v-if="hasAf")
                  .li(@click="gotoPage(dataScreen.providentFund.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-6
                      img.mb-10(src="@/assets/images/home/yd-gjj.png")
                      span 公积金异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.providentFund.count:0" count-class="count-style")
                template(v-if="!hasAf")
                  .li.no-hover
                    .li-img.style-6
                      img.mb-10(src="@/assets/images/home/yd-gjj.png")
                      span 公积金异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.providentFund.count:0" count-class="count-style")
                template(v-if="hasCi")
                  .li(@click="gotoPage(dataScreen.commercialInsurance.code,{hasTime:true, hasStatus: false})")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/yd-shangbao.png")
                      span 商保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.commercialInsurance.count:0" count-class="count-style")
                template(v-if="!hasCi")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/yd-shangbao.png")
                      span 商保异动
                    .li-number
                      count-to(:end="dataScreen?dataScreen.commercialInsurance.count:0" count-class="count-style")
            Col.data-item(:xl="{span: 24}" :xxl="{span: 12}")
              .item-title
                .text
                  | 到期提醒（个）
              .item-content.warp
                template(v-if="hasCustomer")
                  .li(@click="gotoDue('customerInformation', true)")
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/daoqi-1.png")
                      span 客户到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.expireInMonthCustomerTotal:0" count-class="count-style")
                template(v-if="!hasCustomer")
                  .li.no-hover
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home/daoqi-1.png")
                      span 客户到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.expireInMonthCustomerTotal:0" count-class="count-style")
                template(v-if="hasRoster")
                  .li(@click="gotoDue('roster', true)")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-2.png")
                      span 员工到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.dueEmployee:0" count-class="count-style")
                  .li(@click="gotoRetire('roster', true)")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-3.png")
                      span 员工退休<br>< 180天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.retireEmployee:0" count-class="count-style")
                template(v-if="!hasRoster")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-2.png")
                      span 员工到期<br>< 60天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.dueEmployee:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/daoqi-3.png")
                      span 员工退休<br>< 180天
                    .li-number
                      count-to(:end="dataScreen?dataScreen.retireEmployee:0" count-class="count-style")
            Divider
            Col.data-item(span="24")
              .item-title
                .text
                  | 费用数据（元）
                  span.tag.ml-5.font-12 当月
              .item-content.warp
                .li.no-hover
                  .li-img.style-5
                    img.mb-10(src="@/assets/images/home/fy-shebao.png")
                    span 社保费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.socialInsuranceAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-6
                    img.mb-10(src="@/assets/images/home/fy-gjj.png")
                    span 公积金费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.cpfAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-1
                    img.mb-10(src="@/assets/images/home/fy-shangbao.png")
                    span 商保费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.commercialInsuranceAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-7
                    img.mb-10(src="@/assets/images/home/fy-xinzi.png")
                    span 薪资费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.salaryAmt:0" count-class="count-style" :decimals="2")
                .li.no-hover
                  .li-img.style-2
                    img.mb-10(src="@/assets/images/home/fy-fuwufei.png")
                    span 服务费费用
                  .li-number
                    count-to(:end="dataScreenBill?dataScreenBill.serviceFeeAmt:0" count-class="count-style" :decimals="2")
            Divider
            Col.data-item(span="24")
              .item-title
                .text
                  | 账单核对情况
                  span.tag.ml-5.font-12 当月
              .item-content.warp
                template(v-if="hasCustomerBill")
                  .li(@click="gotoBill('CustomerBill', '1')")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/hedui-yes.png")
                      span 已核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.verifiedCount:0" count-class="count-style")
                  .li(@click="gotoBill('CustomerBill', '0')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/hedui-no.png")
                      span 未核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.noVerifiedCount:0" count-class="count-style")
                template(v-if="!hasCustomerBill")
                  .li.no-hover
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home/hedui-yes.png")
                      span 已核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.verifiedCount:0" count-class="count-style")
                  .li.no-hover
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home/hedui-no.png")
                      span 未核对
                    .li-number
                      count-to(:end="dataScreenBill?dataScreenBill.noVerifiedCount:0" count-class="count-style")
        //- .hro-card.fast-link
        //-   Spin(size="large" fix v-if="dataScreenSpin")
        //-   .card-title
        //-     .title-left
        //-       img.mr-8(src="@/assets/images/home/card-kuaijie.png")
        //-       span 快捷键
        //-     .title-right
        //-       .zidingyi(@click="getCustomFastMenuList")
        //-         Icon.mr-5(type="ios-add-circle-outline")
        //-         | 添加链接
          .fast-menu
            .item(v-for="(item,index) in fastMenuList" :key="index" @click="gotoPage(item.code)")
              span {{item.title}} 
              i.iconfont.icon-link.font-18
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 8}" :xxl="{span: 6}")
        .hro-card.log
          Spin(size="large" fix v-if="loggerSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-log.png")
              span 操作日志
            .title-right.more-span.text-gray-9(@click="gotoRouter('loggerList')")
              span
              | 查看更多
              Icon(type="ios-arrow-forward")
          .no-data(v-if="loggerList.length < 1") 暂无操作日志
          .oplog-content
            Timeline
              TimelineItem(v-for="(item,index) in loggerList" :key="index")
                span.font-12 {{item.operateOn.slice(0, 19).replace(/T/g,' ')}}
                div
                  span.mr-8 {{item.operateByName}}
                  span.mr-8 {{item.title}}
                .font-12.text-gray-9 IP：{{item.ipAddress}}
        .hro-card.mt-12
          Spin(size="large" fix v-if="processMsgSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-shenpi.png")
              span 流程审批
          ul.flow-ul
            li(v-for="(item,index) in processMsgList" :key="index" @click="gotoPage(item.code,{status:4, hasStatus: true})") {{item.content}}
    Modal(v-model="customize" title="自定义" width="800" @on-ok="saveFastMenuList")
      Spin(size="large" fix v-if="customFastMenuListSpin")
      CheckboxGroup(v-model="fastMenuListId" @on-change="fastMenuListChange")
        Checkbox(v-for="(item,index) in customFastMenuList" :label="item.id" style="padding: 10px" :key="index") {{item.title}}
</template>

<script>
import Mixin from './homeMixin.js'
import CountTo from '_c/count-to'

export default {
  components: {
    CountTo
  },
  mixins: [Mixin],
  created () {
    this.getProcessMsgList()
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    hasDataScreening () {
      return this.actionArr.indexOf('ShuJuKanBan') > -1
    }
  },
}
</script>

<style lang="less" scoped>
  .oplog-content{
    height: 597px;
    overflow: auto;
  }
  .fast-menu{
    height: 177px;
    overflow: auto;
  }
  .flow-ul{
    height: 275px;
    overflow: auto;
  }
</style>
